<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>svg-multiple-line</title>
    <style>
        .line-animation2 {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .la-line {
            stroke-width: 1px;
            stroke: #000;
            stroke-dasharray: 282;
            stroke-dashoffset: 282;
            animation: dash 0.5s ease-in forwards;
        }

        .la-line2 {
            stroke-width: 1px;
            stroke: #000;
            stroke-dasharray: 282;
            stroke-dashoffset: 282;
            animation: dash 0.5s ease-out 0.5s forwards;
        }

        .la-rect {
            fill: none;
            stroke: #000;
            stroke-dasharray: 720;
            stroke-dashoffset: 720;
            animation: dash 0.5s linear 1s forwards;
        }

        .la-circle {
            fill: none;
            stroke: #000;
            stroke-dasharray: 720;
            stroke-dashoffset: 720;
            animation: dash 0.5s ease-in 1s forwards;
        }

        .la-rect2 {
            fill: none;
            stroke: #000;
            stroke-dasharray: 720;
            stroke-dashoffset: -720;
            animation: dash 1s ease-out 1s forwards;
        }

        .la-circle2 {
            fill: none;
            stroke: #000;
            stroke-dasharray: 720;
            stroke-dashoffset: -720;
            animation: dash 1s linear 1s forwards;
        }

        @keyframes dash {
            to {
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>

<body>
    <hgroup class="line-animation2">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px"
            height="200px">
            <line x1="0" y1="0" x2="200" y2="200" class="la-line"></line>
            <line x1="200" y1="0" x2="0" y2="200" class="la-line"></line>
            <line x1="100" y1="10" x2="100" y2="190" class="la-line2"></line>
            <line x1="10" y1="100" x2="190" y2="100" class="la-line2"></line>
            <rect x="10" y="10" width="180" height="180" rx="20" ry="20" class="la-rect"></rect>
            <circle cx="100" cy="100" r="80" class="la-circle"></circle>
            <rect x="50" y="50" width="100" height="100" rx="20" ry="20" class="la-rect2"></rect>
            <circle cx="100" cy="100" r="40" class="la-circle2"></circle>
        </svg>
    </hgroup>
</body>

</html>